<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人订单丨坚球书城</title>
  <script src="js/vue.js"></script>
  <script src="element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/cookie.js"></script>

  <style type="text/css">
    .el-main {
      position: absolute;
      top: 70px;
      bottom: 0px;
      left: 200px;
      right: 10px;
      padding: 0;
    }
  </style>

</head>
<body>
<div id="app" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;">
  <el-container style="height: 100%; border: 1px solid #eee">

    <el-header style="text-align: right; font-size: 12px; ">
      <a href="#" style="float: left;">
        <span><img style="height: 40px;margin-top: 10px" src="http://r3vta9mus.hb-bkt.clouddn.com/nutLogo.png" alt=""></span>
      </a>
      <!--        登录器-->
      <el-dropdown style="top: 50%;right: 40px" v-if="!flag">
        <el-link href="login.html" target="_blank">登录</el-link>
        |
        <el-link type="info" href="register.html">注册</el-link>
      </el-dropdown>
      <!--        登陆后-->
      <el-dropdown style="top: 50%;right: 40px;cursor: pointer" @command="handleCommand" v-if="flag">
        <span>{{this.username}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="order">个人订单</el-dropdown-item>
          <el-dropdown-item command="cancel">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-container>

      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-menu-item index="1-1" @click="toHome"><i class="el-icon-house"></i>首页</el-menu-item>
          <el-menu-item index="1-2" @click="toCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-menu-item>
          <el-submenu index="1" v-if="flag&&username=='admin'">
            <template slot="title"><i class="el-icon-message"></i>后台管理</template>
            <el-menu-item index="1-3" @click="toBookManage">图书管理</el-menu-item>
            <el-menu-item index="1-4" @click="toOrderManage">订单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main style="overflow-x:hidden">
          <el-table :data="tableData" style="margin-left: 10px">
            <el-table-column prop="createTime" align="center" label="日期">
<!--              <template slot-scope="scope">{{ scope.row.createTime | dateFormat }}</template>-->
            </el-table-column>
            <el-table-column prop="price" align="center" label="金额（元）">
            </el-table-column>
            <el-table-column align="center" label="状态">
              <template slot-scope="scope">
                <el-link type="primary" v-if="scope.row.status==0" disabled>未发货</el-link>
                <el-link type="primary" v-if="scope.row.status==1" @click="receive(scope)">确认收货</el-link>
                <el-link type="primary" v-if="scope.row.status==2" disabled>已签收</el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" label="详情">
              <template slot-scope="scope">
              <el-button type="primary" @click="detailOrder(scope)" plain>查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

        <el-dialog title="订单详细内容" :visible.sync="dialogVisible" width="60%">
          <el-table :data="formData">
            <el-table-column prop="name" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="count" align="center" label="数量">
            </el-table-column>
            <el-table-column prop="price" align="center" label="单价（元）">
            </el-table-column>
            <el-table-column prop="totalPrice" align="center" label="金额（元）">
            </el-table-column>
          </el-table>
        </el-dialog>
      </el-container>

      <el-footer height="50px" style="text-align: center;">坚球书城.Copyright ©2021</el-footer>

    </el-container>
  </el-container>
</div>
</body>
<script>

  const vm = new Vue({
    el: "#app",
    mounted() {
      this.username =  Cookies.get("username")
      this.isLogin()
      this.orderList()
    },
    filters:{
      dateFormat(value){
        return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    data: {
      tableData: [{
        orderId: '',
        createTime: '',
        price: '',
        status: '',
        userId: '',
      }],
      dialogVisible: false,
      formData: [{
        name: '',
        count: '',
        price: '',
        totalPrice: ''
      }],
      username:'',
      flag:false,

    },
    methods: {
      toHome(){
        window.location.href='index.html'
      },
      toCart(){
        window.location.href='cart.html'
      },
      toOrderManage(){
        window.location.href='orderManage.html'
      },
      toOrder(){
        window.location.href='order.html'
      },
      toBookManage(){
        window.location.href='bookManage.html'
      },
      isLogin(){
        if (this.username!==''&&this.username.length>0){
          this.flag = true
        }
      },
      orderList(){
        var that = this
        axios({
          method: "get",
          url: "http://localhost:8080/Book/client/orderServlet?action=showMyOrders&username="+that.username,
        }).then(function (response) {
          console.log(response.data.data.orders)
          that.tableData=response.data.data.orders
        })
      },
      receive(scope){
        var that = this
        axios({
          method: "get",
          url: "http://localhost:8080/Book/client/orderServlet?action=receiveOrder&orderId="+scope.row.orderId,
        }).then(function (response) {
          window.location.href='order.html'
        })
      },
      detailOrder(scope){
        console.log(scope.row.orderId)
        // var id = row.id
        var that = this
        this.dialogVisible = true
        axios({
          method: "get",
          url: "http://localhost:8080/Book/client/orderServlet?action=showOrderDetail&orderId="+scope.row.orderId,
        }).then(function (response) {
          console.log(response.data.data.orderItems)
          that.formData = response.data.data.orderItems
        })
      },
      handleCommand(command){
        if (command === 'order'){
          this.toOrder()
        }else if(command === 'cancel'){
          Cookies.set("username",'')
          window.location.href='index.html'
        }
      },
    }
  })
</script>
</html>